<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button  data-id='1'>点击1</button>
    <button  data-id='2'>点击2</button>
    <button  data-id='3'>点击3</button>
 
    <script>
        {
            //   1 使用 forEach 遍历
            let arr = ['宝马', '奔驰', '奥迪']
            arr.forEach(function (item, index) {
                console.log('值是：' + item)
                console.log('索引是：' + index)
            })

            //  es6的写法

            arr.forEach((item, index) => {
                console.log('值是：' + item)
                console.log('索引是：' + index)
            })


        }
        {
            // es6的过滤  filter  多个进去  出来是一个或者是一些满足条件为真的新数组 
            //   var arr = [12, 66, 4, 88, 3, 7];
            //  let newArr= arr.filter((item,index)=>{
            //       if(item>10) {
            //           return true
            //       }
            //   })  
            //   console.log(newArr)



            // var arr = [12, 66, 4, 88, 3, 7];
            //  let newArr= arr.filter((item,index)=>{
            //       if(item>10&&item<30) {
            //           return true
            //       }
            //   })  
            //   console.log(newArr)


            var arr = [12, 66, 4, 88, 3, 7];
            let newArr = arr.filter((item, index) => item > 10)
            console.log(newArr)


        }



        {

            // some 查找数组中是否有满足条件的元素  只要有1个满足就返回true
            var arr = [10, 30, 4]
            let newArr = arr.some((item, index) => {
                if (item > 3) {
                    return true
                }
            })

            console.log(newArr)

        }



        {
            // every   查找数组中是否有满足条件的元素   
            // 如果每一个都满足条件 那么返回true 只要有1个不满足条件 那么返回false

            var arr = [10, 30, 4]

            //    let newArr= arr.every((item,index)=>{
            //         if(item>3) {
            //             return  true
            //         }
            //     })

            //     console.log(newArr)


            let newArr = arr.every(item => item >= 30)
            console.log(newArr)
        }



        {
            //找到 符合条件的那个数   学一个方法   find  查找的意思   查到到符合条件的  返回当前这一项

            let arr = [10, 30, 4]
            let arr1 = [

                { name: '张三', id: 1,  price:100},
                { name: '李四', id: 2 ,price:200},
                { name: '王五', id: 3 ,price:300}



            ]
            //    let  newArr=arr.find((item,index)=>{
            //        if(item==30) {
            //            return item
            //        }
            //    })

            //    console.log(newArr)


            function getItem(id) {
                let newArr = arr1.find((item, index) => {
                    if (item.id == id) {
                        return item
                    }
                })

                console.log(newArr)

            }


            // getItem(2)
            

            let btns=document.querySelectorAll("button")
            btns.forEach(item=>{
                console.log(item)
                item.onclick=function() {
                    console.dir(this)
                    let dataId=this.getAttribute('data-id')
                   let  datamyId=this.dataset.id

                   console.log(dataId,datamyId)
                     getItem(dataId)
            

                }
            })

            console.log(btns)  //把一个伪数组变成真正的数组  from   

        //    let totalPrice= btns.reduce((acc,current)=>{
        //         return  acc+current.price
        //     },0)

            //  console.log(totalPrice)

         let  trueArr=  Array.from(btns);

         console.log(trueArr)

         
           let totalPrice= trueArr.reduce((acc,current)=>{
               console.log(acc,current)
               let dataId=current.getAttribute('data-id')
                //    let  datamyId=this.dataset.id
                return  acc+parseInt(dataId)
            },0)

            console.log(totalPrice)









         



             



        }







    </script>
</body>

</html>